<template>
  <div>
    <el-card class="box-card">
      <el-row>
        <el-col :span="21">数据总览</el-col>
        <el-col :span="3">
          <el-form size="small" :inline="true" :model="queryData" class="demo-form-inline" label-width="100px">
            <el-form-item>
                <el-select v-model="queryData.activityInstanceId" placeholder="活动实例">
                    <el-option
                            v-for="item in activityInstance"
                            :key="item.activityInstanceId"
                            :label="item.name"
                            :value="item.activityInstanceId"
                            @change="search"/>
                </el-select>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
      <!--数据总览-->
      <el-row :gutter="20">
        <el-col :span="4">
          <div class="grid-content bg-purple-dark">
            <el-row>访问量</el-row>
            <br/>
            <el-row>
              <el-col :span="20">{{ tableData.countClient }}</el-col>
            </el-row>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="grid-content bg-purple-dark">
            <el-row>有效线索人次</el-row>
            <br/>
            <el-row>
              <el-col :span="20">{{ tableData.countClient }}</el-col>
            </el-row>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="grid-content bg-purple-dark">
            <el-row>中奖人数</el-row>
            <br/>
            <el-row>
              <el-col :span="20">{{ tableData.countPrizes }}</el-col>
            </el-row>
          </div>
        </el-col>
      </el-row>
      <br/>
    </el-card>
    <div class="interspaceH"></div>

    <el-card class="box-card">
      <el-row>
        <el-col :span="14">扫码数据概览</el-col>
        <el-col :span="10">
          <el-form size="small" :inline="true" :model="queryTime" class="demo-form-inline" label-width="100px">
            <el-form-item>
              <el-date-picker
                v-model="queryTime.date"
                type="daterange"
                range-separator="至"
                start-placeholder="活动开始日期"
                end-placeholder="活动结束日期">
              </el-date-picker>
            </el-form-item>
            <el-form-item>
              <el-button size="small" type="primary" @click="Time">查询</el-button>
              <el-button size="small" @click="chongzhi">重置</el-button>
              <el-button size="small" type="primary">导出  Excel</el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
      <!--多选按钮-->
      <div>
        <el-form size="small" :inline="true" :model="screen" class="demo-form-inline" label-width="100px">
          <el-form-item label="流量访问：">
            <el-checkbox-group v-model="screen.type">
              <el-checkbox label="PV" name="pv"></el-checkbox>
            </el-checkbox-group>
          </el-form-item><br />
          <el-form-item label="转化数据：">
            <el-checkbox-group v-model="screen.shuju">
              <el-checkbox label="有效线索" name="countClient"></el-checkbox>
              <el-checkbox label="中奖人数" name="countPrizes"></el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </el-form>
      </div>
      <!--折线图-->
      <div>
        <div class="tubiao" ref="chart" style="height: 500px;"></div>
      </div>
      <!--表格-->
      <div>
          <el-table @selection-change="tableRowChange" :data="tableData"
                    :header-cell-style="{background:'#F3F4F7',color:'#555'}" style="width: 100%">
          <el-table-column
            prop="name"
            label="活动标题"
            width="200">
          </el-table-column>
          <el-table-column
            prop="date"
            label="活动时间"
            width="320">
          </el-table-column>
          <el-table-column
            prop="countClient"
            label="活动首页访问PV">
          </el-table-column>
          <el-table-column
            prop="countClient"
            label="有效线索人数">
          </el-table-column>
          <el-table-column
            prop="countPrizes"
            label="中奖人数">
          </el-table-column>
        </el-table>
          <el-pagination @size-change="queryDataHandle(pagePagination.currentPage,$event)"
                         @current-change="queryDataHandle($event,pagePagination.pageSize)"
                         :current-page="pagePagination.currentPage"
                         :page-sizes="pagePagination.pageSizes"
                         :page-size="pagePagination.pageSize"
                         layout="total, sizes, prev, pager, next"
                         :total="pagePagination.total">
          </el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>
import Pagination from "@/components/Pagination"
export default {
  name: "fourth",
  components: {
    Pagination
  },
  data() {
    return{
        activityInstance:[],
      queryData:{},
        queryTime: {
            date: '',
            uptime: '',
            endtime: ''
        },
        screen: {
            type: '',
            shuju: ''
        },
      tableData: [],

      formInline: {
        page: 1,
        limit: 10,
        varLable: '',
        varName: '',
        token: localStorage.getItem('logintoken')
      },
      // 分页参数
        pageparm: {
            currentPage: 1,
            pageSize: 10,
            total: 10
        },
        pagePagination: {
            currentPage: 1,
            pageSizes: [10, 15, 20, 25],
            pageSize: 10,
            total: 0
        },

    }
  },
    mounted() {
        //折线图
        this.getEchartData()
        this.queryDataHandle(1, 10);
    },
  methods:{
      queryDataHandle(page = 1, row = 10) {
          let payload = {
              pageNum: page,
              pageSize: row
          }
          let that = this
          that.$request("/api/wheel/getlucyDraw/1_0", payload, "POST").then((data) => {
              that.activityInstance = data.rows
          })
          var clientActivity = {
              activityInstanceId : this.queryData.activityInstanceId,
              pageNum: page,
              pageSize: row
          }
          that.$request("/api/clientActivity/activityMassage/1_0", clientActivity, "POST").then((data) => {
              that.pagePagination['total'] = data.total
              that.pagePagination['pageSize'] = data.row
              that.tableData = data.rows
              if (that.tableData == 0) {
                  that.tableData.countClient = 0;
                  that.tableData.countPrizes = 0;
              }
          })
      },
      search() {
          let activityInstance={
              activityInstanceId: this.queryData.activityInstanceId
          }
          this.$request("/api/wheel/getlucyDraw/1_0", activityInstance, "POST").then((data) => {
              this.activityInstance = data.rows
          })
      },
      chongzhi() {
          this.queryTime = {}
      },
      Time() {
          var clientActivity = {
              uptime : this.queryTime.date[0],
              endtime : this.queryTime.date[1]
          }
          this.$request("/api/clientActivity/activityMassage/1_0", clientActivity, "POST").then((data) => {
              this.tableData = data.rows
          })
      },
    // 分页插件事件
    callFather(parm) {
      this.formInline.page = parm.currentPage
      this.formInline.limit = parm.pageSize
      this.getdata(this.formInline)
    },


    //折线图
    getEchartData() {
      const chart = this.$refs.chart
      if (chart) {
        const myChart = this.$echarts.init(chart)
        const option = {
          xAxis: {
            type: 'category',
            data: ['2021-10-10']
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              data: [0],
              type: 'line'
            }
          ]
        }
        myChart.setOption(option)
        window.addEventListener("resize", function () {
          myChart.resize()
        })
      }
      this.$on('hook:destroyed', () => {
        window.removeEventListener("resize", function () {
          myChart.resize();
        });
      })
    },
      tableRowChange(val) {
          if (val.length > 0) {
              this.titleCurrentPanel = true
          } else {
              this.titleCurrentPanel = false
          }
          this.multipleSelection = val;
      },
  }
}
</script>

<style scoped>
.bg-purple-dark {
  background: #cbe7f7;
  padding: 10px;
}

.grid-content {
  border-radius: 4px;
  min-height: 80px;
}


.tubiao {
  background: #fff;
}
</style>
